.banner {
  padding: 0;
  background-color: #52575c;
  color: white;
}

.banner-text {
  padding: 8px 20px;
  margin: 0;
}


#join-form {
  margin-top: 10px;
}

.tips {
  font-size: 12px;
  margin-bottom: 2px;
  color: gray;
}

.join-info-text {
  margin-bottom: 2px;
}

input {
  width: 100%;
  margin-bottom: 2px;
}

.player {
  width: 1090px;
  height: 620px;
}

.player-name {
  margin: 8px 0;
}

#success-alert, #success-alert-with-token {
  display: none;
}
/* .col{
  width: 100%;
  height: 100%;
} */
/* #local-player{
  width: 1000px;
  height: 200px;
} */
/* id="local-player" */


@media (max-width: 640px) {
  .player {
    width: 320px;
    height: 240px;
  }
}



#footer{
  position: fixed;
  width: 300px;
  height: 60px;
  display: none;
  background-color: white;
  border: 1px solid  #6666;
  /* position: absolute; */
  bottom: 30px;
  left: 30px;
  border-radius: 5px;
  z-index: 111100;
}
#imgeslist{
  display: flex;
  width: 100%;
  height: 60px;
  
}
.imgbox{
  width: 300px;
  height: 300px;
  /* background: #FFC0CB; */
  text-align: center;
  /* line-height: 60px; */
  width: 100%;
  height: 60px;
}
.imgbox img {
  /* margin-top: 15px; */
  /* align-items: center; */
}
.txt1 {
  display: inline-block;
  position: relative;
  top: -43px;
  left: 5px;
}
.txt2{
  display: inline-block;
  position: relative;
  top: 17px;
  left: -34px;
}
.txt3{
  display: inline-block;
  position: relative;
  top: 29px;
  left: -34px;
}
.txt4{
  display: inline-block;
  position: relative;
  top: 29px;
  left: -34px;
}
.txt5{
  display: inline-block;
  position: relative;
  top: 17px;
  left: -34px;
}
.LaserPen{
  display: block;
  width: 50px;
  height: 50px;
}
#tagging_img{
  display: none;
  position:relative ;
  bottom: 120px;
  left: 128px;
  width: 200px;
  height: 100px;
}
#dingwei{
  display: flex;
}
#circular{
  position: absolute;
  bottom: 50px;
  left: -10px;
  z-index: 1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* background: pink; */
  /* margin-right: 5px; */
}
#circular img {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#circular1{
  position: relative;
  bottom: 0px;
  left: -10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* background: pink; */
  /* margin-right: 5px; */
}
#circular1 img {
  width: 100%;
  height: 100%;
}
#square{
  position: absolute;
  left: 46px;
  z-index: 1;
  width: 50px;
  height: 50px;
  /* background: red; */
  
}
#square img {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
}
#square1{
  position: relative;
  bottom: 0px;
  left: -4px;
  width: 50px;
  height: 50px;
  /* background: red; */
  
}
#square1 img{
  width: 100%;
  height: 100%;
}

#yuan{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: pink;
  position: relative;
  top: -2px;
  left: 1px;
}
#yuan1{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: pink;
  z-index: 111;
  position: relative;
  top: -2px;
  left: 1px;
}

#arrow{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 91px;
}
#arrow img{
  position: absolute;
  left: 12px;
  z-index: 2222;
  width: 100%;
  height: 100%;
}
#arrow1{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 104px;

}
#arrow1 img{
  width: 100%;
  height: 100%;
  
  position: absolute;
  top: 0px;
  left: -1px;

}
#whiteboard{
  background: pink;
  /* opacity: 0.2; */
  /* background-color: 0; */
  background-color: rgba(0, 0, 0, 0);
  color: red;
  position: absolute;
  top: 180px;
  width: 100%;
  left: 0px;
  z-index: 11111;
  
  
  
}
#isShowVideo{
  display: block;
}
#player-wrapper-309954540{
  display: block;
}